
import { Card, Space, Button, DatePicker, Select, Input } from "antd";
import { isEqual } from "lodash-es";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { getUserFlowAsync, changeParams } from "@/store/userFlow/userFlowSlice";
import dayjs from '@/utils/dayjs'
import { TZ } from "@/utils/env";

const { RangePicker } = DatePicker

export default function Filter() {
  const dispatch = useAppDispatch();

  const { params, table } = useAppSelector((state) => state.userFlow);
  const { config: { data: { data: { wallet_source_map = [] } = {} } = {} } = {} } = useAppSelector(state => state.app)

  return (
    <Card>
      <Space
        wrap
        size="large"
        className="w-full flex justify-between"
        classNames={{ item: "last:ml-auto" }}
      >
        <label>
          <span>时间：</span>
          <RangePicker showTime value={[dayjs.unix(params.start_t).tz(TZ), dayjs.unix(params.end_t).tz(TZ)]} onChange={date => {
            if (!date) { return }
            dispatch(changeParams({
              start_t: date[0]?.unix(),
              end_t: date[1]?.unix()
            }))
          }} />
        </label>
        <label>
          <span>流水类型：</span>
          <Select value={params.source} className="min-w-[120px]" onChange={source => {
            dispatch(changeParams({ source }))
          }} options={[{ label: '全部', value: '' }, ...wallet_source_map]} />
        </label>
        <label>
          <span>用户名称：</span>
          <Input value={params.username} className="max-w-[120px]" onChange={e => {
            dispatch(changeParams({ username: e.target.value }))
          }} />
        </label>
        <label>
          <span>用户ID：</span>
          <Input value={params.query_user_id} className="max-w-[120px]" onChange={e => {
            dispatch(changeParams({ query_user_id: e.target.value }))
          }} />
        </label>
        <Button
          loading={table.status === "loading"}
          type="primary"
          onClick={(): void => {
            if (isEqual(params, table?.params)) {
              dispatch(getUserFlowAsync({...params}));
            } else {
              const newParams = {
                ...params,
                page: 1,
              };
              dispatch(changeParams(newParams));
              dispatch(getUserFlowAsync(newParams));
            }
          }}
        >
          查询
        </Button>
      </Space>
    </Card>
  );
}
